<!-- 
  1.点击页面上的按钮 地址栏发生了变化  #/foo
  2.地址栏发生变化之后 页面上内容区域同步发生了变化渲染
 -->
 <div>
  <a href="#/foo">go to foo</a>
  <a href="#/bar">go to bar</a>
</div>
<!-- 该区域的内容会随着地址栏的变化而变化内容 -->
<div id="router-view"></div>
<script>
   // 1.申明hash值和内容的绑定 （对应关系）
   const routes = {
     // key代表当前路径上的hash值
     // value代表要渲染的内容
     '#/foo':`this is foo`,
     '#/bar':`this is bar`
   }

   // 2.监听到地址栏的变化 hashchange 完成动态内容的渲染
   window.addEventListener('hashchange',()=>{
     // 动态渲染逻辑
     // 获取到当前的hash值
     let hash = location.hash
     // 完成渲染逻辑
     document.getElementById('router-view').innerHTML = routes[hash]
   })
</script>